<template>
  <div class="recommend-tab">
    <my-nav
      :nav-data="navData"
      :cur-index="curIndex"
      @update:cur-index="updateCurIndex"
    ></my-nav>
    <hr style="border: 2px solid orange" />
    <component 
        :is="filterListData.component"
        :data="filterListData.data"
    ></component>
  </div>
</template>

<script>
import MyNav from './MyNav/index.vue';
import Chinese from './List/Chinese/index.vue';
import English from './List/English/index.vue';
import Music from './List/Music/index.vue'


export default {
  name: 'recommend-tab',
  components: {
    MyNav,
    Chinese,
    English,
    Music
  },
  props: ['rtData','initIndex'],
  data() {
    return {
      curIndex: this.initIndex,
      // navData: ['Chinese', 'English', 'Music'],
      listData : [
        { subject: 'Chinese', component: 'chinese', data: this.rtData[0] },
        { subject: 'English', component: 'english', data: this.rtData[1] },
        { subject: 'Music', component: 'music', data: this.rtData[2] }
      ]
    }
  },
  methods: {
    updateCurIndex(index) {
      this.curIndex = index;
    }
  },
  computed: {
    navData() {
      return this.listData.map(item => {
        return item.subject
      });
    },
    filterListData() {
      return this.listData[this.curIndex];
    }
  }
}
</script>

<style>
.recommend-tab {
  width: 780px;
  height: 750px;
  margin: 10px auto;
  padding: 10px 10px;
  border: 1px solid #333;
}
</style>
